<template>    
  <div>
    <el-header>
      <el-row :gutter="20">
        <el-col :span="21">
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#409EFF"
            router
          >
            <img
              class="logo"
              src="/images/logo.png"
            >  
            <!-- 栏目导航 -->
            <div
              v-for="column in menu"
              :key="column.id"
              class="nav_li"
            >
              <!-- 多级栏目(child为二级栏目) -->
              <el-submenu
                v-if="column.child && powerOn(column.id)"
                :index="column.id"
              >
                <template
                  slot="title"
                >
                  <i :class="column.iCon" />{{ column.title }}
                </template>
                <!-- 二级栏目 -->
                <div
                  v-for="child in column.child"
                  :key="child.id"
                > 
                  <!-- 外链(aSrc为外链地址) -->
                  <a
                    v-if="child.aSrc && powerOn(child.id)"
                    :href="child.aSrc"
                    target="_block"
                    class="outer_a"
                  >{{ child.title }}</a>
                  <el-menu-item
                    v-else-if="powerOn(child.id)"
                    :index="child.src"
                  >                         
                    <!-- 内部跳转 -->
                    <span>
                      {{ child.title }}
                    </span>                      
                  </el-menu-item>
                </div>
              </el-submenu>
              <!-- 单级栏目 -->
              <a
                v-else-if="column.aSrc && powerOn(column.id)"
                :href="column.aSrc"
                class="outer_aBl"
                target="_block"
              >
                <i :class="column.iCon" />{{ column.title }}
              </a>
              <el-menu-item
                v-else-if="powerOn(column.id)"
                :index="column.src"
              >                    
                <span>
                  <i :class="column.iCon" />{{ column.title }}
                </span>                   
              </el-menu-item>
            </div>
          </el-menu>
        </el-col>
        <el-col
          :span="3"
          style="text-align: right;"
        >
          <el-dropdown @command="logOut">
            <span class="el-dropdown-link">
              <i
                class="el-icon-s-custom"
                style="margin-right: 10px;"
              />{{ username }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-if="powerOn('7')"
                command="reset"
              >
                修改密码
              </el-dropdown-item>
              <el-dropdown-item
                command="out"
                @click="logOut"
              >
                退出
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>
    <ResetPassword />
  </div>    
</template>

<script>  
  /* 页头 */
  import ResetPassword from "./ResetPassword.vue";
  import menu from "../../config/header.config";
  export default {
    components:{
      ResetPassword
    },
    data(){
      return {
        username:sessionStorage.getItem('username'),//用户名
        /*
          请前往config/header.config.js配置页头数据
        */
        menu:menu,
        menuPower:[],//导航权限
      }
    },
    mounted:function(){
      this.getMenuPower();//获取导航权限数据
    },
    methods:{  
      //权限开关
      powerOn(id){
        return this.menuPower.includes(id);
      },
      //导航权限数据
      async getMenuPower(){
        const {data:res} = await this.$http.get("roles");  
        this.menuPower = res.find((item)=>{
          return item.username === this.username
        }).menu.split(",")
      },      
      //登陆退出
      logOut(val){ 
        if(val == 'reset'){
          //触发显示重置密码块的全局事件
          this.$bus.$emit("showPasswordBlock")
        }else{
          sessionStorage.clear()
          this.$router.push('/login')      
        }          
      }
    }  
  }

</script>
<style scoped>
  .el-header {
    background-color: #545c64;
    color: #333;
    line-height: 60px;
    height: 60px;
  }
  .el-aside {
    color: #333;
  }

  .man_content {
    position: relative;
    width: 100%;
    height: 100%;
  }

  section.el-container {
    height: 100%;
  }

  ul.el-menu {
    height: 100%;
  }

  .logo {
    margin-top: 16px;
    float: left;
    margin-right: 30px;
    outline: none;
  }

  i {
    color: #fff;
    position: relative;
    top: -1px;
  }

  li.el-submenu.is-active i,
  li.el-submenu.is-active a {
    color: #409EFF;
  }

  a:hover {
    color: #409EFF;
  }

  .el-menu-item-group__title {
    font-size: 14px;
    color: #333;
  }

  .el-menu-item {
    color: #888;
  }

  .el-dropdown-link {
    display: block;
    color: #fff;
    padding-top: 20px;
    outline: none;
  }
 
  ul.el-menu-demo.el-menu--horizontal.el-menu {
    min-width: 1000px;
  }

  .user_te {
    line-height: 40px;
    text-align: right;
    padding-right: 20px;
  }

  .ind_content {
    min-height: auto;
    overflow: visible;
  }

  .el_a {
    color: #fff;
  }

  .el-submenu.is-active .el-submenu__title span.title {
    color: #409EFF;
  }

  .el-menu {
    transform: all 0.3s ease;
  }

  .el-header a {
    padding: 20px 0;
  }

  i.iconfont {
    margin-right: 6px;
  }  
  .nav_li {
    float: left;
  }
  .nav_li a {color:#fff;}
  ul.el-menu-demo.el-menu--horizontal.el-menu {
      border-bottom: 0;
  }
  .el-menu--horizontal .el-menu .el-menu-item div {
      line-height: 36px;
  }
  a.outer_aBl {
      height: 56px;
      line-height: 56px;
      margin-left: 20px;
  }
  a.outer_a {
      height: 36px;
      line-height: 36px;
      padding: 0 10px;
      color: #fff;
  }
  .outer_aBl i {transition: all 0.3s;}
  .outer_a:hover,.outer_aBl:hover,.outer_aBl:hover i {color:rgb(64, 158, 255)}   
  a.outer_aBl .icon-wailian:before {
      opacity: 0.5;
      width: 12px;
      font-size: 14px;
  }
</style>
